<template>
  <div>
    <van-nav-bar class="box" title="首页" />
    <!-- 搜索框 -->
    <!-- 搜索 -->
    <van-button
      class="search-btn"
      slot="title"
      type="info"
      size="small"
      round
      to="/search"
      icon="search"
      >商品搜索 共 {{ goodsCounts }}款好物</van-button
    >

    <!-- //轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in banner" :key="item.id">
        <img style="width: 100%; hight: 100%" :src="item.image_url" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 居家五个盒子 -->
    <van-grid column-num="5" display="flex">
      <van-grid-item text="居家">
        <template slot="icon">
          <van-image
            round
            width=" 45px"
            height="45px"
            src="	http://124.223.14.236:8360/static/dist/img/menu-0.9c1ccf1b.jpg"
          />
        </template>
      </van-grid-item>
      <van-grid-item text="餐厨">
        <template slot="icon">
          <van-image
            round
            width=" 45px"
            height="45px"
            src="	http://124.223.14.236:8360/static/dist/img/menu-1.1e58295a.jpg"
          />
        </template>
      </van-grid-item>
      <van-grid-item text="配件">
        <template slot="icon">
          <van-image
            round
            width=" 45px"
            height="45px"
            src="	http://124.223.14.236:8360/static/dist/img/menu-2.b66afb40.jpg"
          />
        </template>
      </van-grid-item>
      <van-grid-item text="服装">
        <template slot="icon">
          <van-image
            round
            width=" 45px"
            height="45px"
            src="	http://124.223.14.236:8360/static/dist/img/menu-3.292eab05.jpg"
          />
        </template>
      </van-grid-item>
      <van-grid-item text="志趣">
        <template slot="icon">
          <van-image
            round
            width=" 45px"
            height="45px"
            src="http://124.223.14.236:8360/static/dist/img/menu-4.49bfba93.jpg"
          />
        </template>
      </van-grid-item>
    </van-grid>
    <!-- 品牌商 -->
    <div class="ppzzs">
      <router-link to="/brand">
        <p class="pp">品牌制造商直供</p>
      </router-link>
      <van-grid :border="false" :column-num="2">
        <van-grid-item
          :to="'/bddetail/' + item.id"
          v-for="item in brandList"
          :key="item.id"
        >
          <span class="pp1">{{ item.name }}</span>
          <span class="pp2">{{ item.floor_price }}元起</span>
          <van-image :src="item.new_pic_url" />
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 新品首发 -->
    <div class="ppzzs">
      <router-link to="/newgoods">
        <p class="pp"><a href="">周一周四·新品首发</a></p>
      </router-link>
      <van-grid style="padding-left: 18px" :gutter="12">
        <van-grid-item
          v-for="item in newGoodsList"
          :key="item.id"
          :to="'/goodsDetail/' + item.id"
        >
          <template slot="text">
            <span style="font-size: 13px">{{ item.name }}</span>
            <span style="color: red">￥{{ item.retail_price }}</span>
          </template>
          <template slot="icon">
            <van-image
              round
              width=" 150px"
              height="150px"
              :src="item.list_pic_url"
            />
          </template>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 人气推荐 -->
    <div class="ppzzs">
      <router-link to="/hotgoods">
        <p class="pp"><a href="">人气推荐</a></p>
      </router-link>

      <div
        @click="$router.push('/goodsDetail/' + item.id)"
        style="display: flex; font-size: 16px"
        v-for="item in hotGoodsList"
        :key="item.id"
      >
        <div style="float: left">
          <img style="height: 150px" :src="item.list_pic_url" alt="" />
        </div>
        <div style="padding-top: 50px">
          <div>{{ item.name }}</div>
          <div style="color: #666; font-size: 14px">
            {{ item.goods_brief }}
          </div>
          <div style="color: red">￥{{ item.retail_price }}</div>
        </div>
      </div>
    </div>
    <!-- 专题精选 -->
    <div class="ppzzs">
      <p class="pp"><a href="">专题精选</a></p>
      <!-- //轮播图 -->
      <van-swipe
        class="my-swipe"
        :show-indicators="false"
        :autoplay="3000"
        indicator-color="white"
      >
        <van-swipe-item v-for="item in topicList" :key="item.id">
          <img
            style="width: 100%; height: 200px"
            :src="item.scene_pic_url"
            alt=""
          />
          <div class="miaoshu">
            <span style="font-size: 16px">{{ item.title }}</span>
            <span style="color: red">￥{{ item.price_info }}</span>
            <div
              style="
                color: #999;
                white-space: nowrap;
                overflow: hidden;
                font-size: 14px;
              "
            >
              {{ item.subtitle }}
            </div>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 居家 -->
    <div class="ppzzs" v-for="item in categoryList" :key="item.id">
      <p class="pp">
        <a href="">{{ item.name }}</a>
      </p>
      <van-grid style="padding-left: 18px" :gutter="12">
        <van-grid-item
          v-for="obj in item.goodsList"
          :key="obj.id"
          @click="$router.push('/goodsDetail/' + obj.id)"
        >
          <template slot="text">
            <span style="font-size: 13px">{{ obj.name }}</span>
            <span style="color: red">￥{{ obj.retail_price }}</span>
          </template>
          <template slot="icon">
            <van-image
              round
              width=" 150px"
              height="150px"
              :src="obj.list_pic_url"
            />
          </template>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getHome } from "@/api/zhouyu/home.js";
import { goodsCounts } from "@/api/yangyang/Classify";

export default {
  name: "Home",
  data() {
    return {
      banner: [],
      channel: [],
      brandList: [],
      newGoodsList: [],
      hotGoodsList: [],
      topicList: [],
      categoryList: [],
      goodsCounts: "",
    };
  },
  created() {
    this.initHome();
    this.getGoodsCounts();
  },
  methods: {
    // 获取商品数量
    async getGoodsCounts() {
      let res = await goodsCounts();
      this.goodsCounts = res.data.data.goodsCount;
    },
    async initHome() {
      const { data } = await getHome();
      console.log(data);
      this.banner = data.data.banner;
      this.channel = data.data.channel;
      this.brandList = data.data.brandList;
      this.newGoodsList = data.data.newGoodsList;
      this.hotGoodsList = data.data.hotGoodsList;
      this.topicList = data.data.topicList;
      this.categoryList = data.data.categoryList;
      /*    this.goodsList = data.data.categoryList[0].goodsList;
      console.log(this.goodsList); */
    },
  },
};
</script>


<style lang="less" scoped>
.box {
  margin-bottom: 10px;
  background-color: red;
  color: #fff;
}
.van-nav-bar__title {
  color: #fff;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.van-grid-item__text {
  font-size: 30px;
}
.pp {
  text-align: center;
  font-size: 30px;
  height: 100px;
  line-height: 100px;
}
.ppzzs {
  position: relative;
}
.ppzzs .pp1 {
  position: absolute;
  top: 50px;
  left: 30px;
  z-index: 1;
  font-size: 30px;
}
.ppzzs .pp2 {
  position: absolute;
  top: 90px;
  left: 30px;
  z-index: 1;
  color: #999;
  font-size: 30px;
}
/*包含以下四种的链接*/
a {
  text-decoration: none;
  color: #000;
}

.miaoshu {
  color: #000;
  padding-left: 50px;
  font-size: 30px;
}
.my-swipe .van-swipe-item {
  line-height: 50px;
  background-color: #fff;
  text-align: left;
}
.search-btn {
  width: 90% !important;
  margin-top: 5px !important;
  margin-bottom: 10px !important;
  color: #666 !important;

  margin-left: 48px !important;
  background-color: #ededed;
  border: 1px solid #ededed !important;
}
/deep/.van-nav-bar__title {
  color: #fff;
}
</style>
